<template>
  <div class="common-pagination">
    <div class="common-page-wrap">
      <t-pagination
        class="pagination"
        :show-page-size="true"
        size="small"
        :show-jumper="true"
        :page-size-options="pageSizeOptions"
        v-bind="$attrs"
        :page-size="pageSize"
        @change="pageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { PageInfo } from 'tdesign-vue-next';
import { ref } from 'vue';

defineProps({
  pageSize: {
    type: Number,
    default: 20,
  },
});

const emits = defineEmits(['pageChange', 'loadPage']);

// 初始
const INIT_PAGE_SIZE_OPTIONS = [
  { label: '每页显示 10 条', value: 10 },
  { label: '每页显示 20 条', value: 20 },
  { label: '每页显示 50 条', value: 50 },
  { label: '每页显示 100 条', value: 100 },
];

const pageSizeOptions = ref<any[]>([...INIT_PAGE_SIZE_OPTIONS]);

// 分页监听
const pageChange = (baseInfo: PageInfo) => {
  const { pageSize, current } = baseInfo;
  emits('pageChange', { current, pageSize });
};
</script>

<style lang="less" scoped>
// 公共分页
.common-pagination {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 44px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 16px;
  box-sizing: border-box;

  .common-page-wrap {
    display: flex;
    align-items: center;
    z-index: 999;
    padding: 10px;

    :deep(.t-pagination) {
      .t-pagination__btn {
        color: #999 !important;
      }

      .t-pagination__total {
        margin-right: 10px;
      }
    }
  }
}
</style>
